<template>
<view class="container">
		<view class="box">
			<view class="title">驗證手機號</view>
			<view class="inp_item">
				<text style="font-size: 26rpx;color: #999;margin-right: 10rpx;">+886</text>
				<input type="number" placeholder="請輸入10位有效手機號" placeholder-style="font-size:26rpx;color:#999">
			</view>
			<view class="inp_item" style="justify-content: space-between;">
				<input type="number" placeholder="請輸入6位數字驗證碼" placeholder-style="font-size:26rpx;color:#999">
				<view class="btn">獲取驗證碼</view>
			</view>
			<view class="btns">
				<view class="btns_item">取消</view>
				<view class="btns_item">確定</view>
			</view>

		</view>

		<view class="check_box">
			<checkbox-group style="display: flex;align-items: center;" >
				<checkbox class="checkbox"  /><text style="font-size: 22rpx;color: #000000;font-weight: 400;" >我已閲讀并同意《註冊協議》《隱私協議》</text>
			</checkbox-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="less">
.container {
		padding: 26rpx 30rpx;
		box-sizing: border-box;
		background: #F3F5F9;
		height: calc(100vh - 90rpx);

		position: relative;
	}

	.box {
		width: 581rpx;
		height: 508rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		margin: 0 auto;
		margin-top: 248rpx;
	}

	.title {
		font-size: 30rpx;
		text-align: center;
		padding-top: 41rpx;
		margin-bottom: 20rpx;
	}

	.inp_item {
		display: flex;
		align-items: center;
		/* justify-content: space-between; */
		margin: 0 49rpx;
		padding: 30rpx 0;
		box-sizing: border-box;
		border-bottom: 1rpx solid #F2F2F2;
		;
	}

	.btn {
		font-size: 22rpx;
		color: #999;
	}

	.btns {
		display: flex;
		margin-top: 59rpx;
		justify-content: space-around;
	}

	.btns_item {
		width: 114rpx;
		height: 53rpx;
		background: #39B19D;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		font-size: 26rpx;
		color: #fff;
		line-height: 53rpx;
		text-align: center;
	}

	.check_box {
		position: absolute;
		bottom: 105rpx;
		left: 0%;
		right: 0%;
		display: flex;
		justify-content: center;
	}
	
	/* checkbox.round .wx-checkbox-input,checkbox.round .uni-checkbox-input{
		border-radius: 100%;
	} */
	
	/* uni-checkbox .uni-checkbox-input{
		border-radius: 50% !important;
	} */
	
	/deep/uni-checkbox .uni-checkbox-input{
		border-radius: 50%;
		background-color: #fff;
	}
	/deep/uni-checkbox:not([disable]) .uni-checkbox-input:hover{
		border-color: #fff;
	}
	/deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked{
		background-color: #39B19D !important;
		border-color: #39B19D !important;
		color: #fff !important;
	}
</style>
